<template>
    <div class="collection-content">
        <collectTap :collecttype=collectTap></collectTap>
        <div class="tab-content">
            <div class="tab-content-in">
                <div class="top-cont">
                    <div class="left-info">全部商家({{lis.length}}) <i class="icon"></i></div>
                    <div class="right-info">
                        <!--<a>一键清理</a>-->
                        <a class="a1" @click="managestatus= !managestatus">管理商家 <i class="icon"></i></a>
                    </div>
                </div>
                <div class="commodity-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="4">
                    <div class="same-box" v-for="item in lis" :key="item.companyId" @click="checkitem(item)">
                        <div class="zhe" v-show="managestatus"></div>
                        <router-link :to="{name:'Shops',query:{id:item.companyId}}">
                            
                            <div class="boxin">
                                <i class="choose-icons" id="icons_shop" :class="{active: item.ischecked}" v-show="managestatus" style="width:15px; height:15px; "></i>
                                <div class="left">
                                    <img :src=item.headimgurl alt="" style="border-radius:50%">
                                </div>
                                <a class="center">{{item.companyName}}</a>
                                <div class="right"></div>
                            </div>
                        </router-link>
                    </div>
                </div>
                <loadingtmp :busy="busy" :datalength="lis.length" :loadall="loadall"></loadingtmp>
            </div>

            <div class="choose-content" v-show="managestatus">
                <div class="bottom-choose">
                    <div class="left-c" @click="allcheck">
                        <i class="icon" :class="{active: allchkstatus}"></i>全选
                    </div>
                    <div class="right-del" @click="deletesomeitem">删除</div>
                </div>
                <div class="choose-mc"></div>
            </div>
        </div>
        <navFooter :pageName="pageName"></navFooter>
    </div>
</template>
<style scoped>
    @import "../../../assets/personal/css/collection.css";
    #icons_shop{
        border-radius: 50%;
        border: 1px solid #cccccc;
    }
    .commodity-list{
        height: 530px;
        overflow: scroll
    }
</style>
<script>
    import navFooter from '@/components/footer'
    import collectTap from '@/components/personal/collect_tap'
    import loadingtmp from '@/components/load/loading'
    export default {
        data() {
            return {
                pageName: "collect",
                lis: {},
                managestatus: false,
                allchkstatus: false,
                dels: [],
                collectTap: 2,
                page: 1,
                pageSize: 4,
                busy: false,////////////
                loadall: false,
            }
        },
        mounted() {
           
        },
        created: function () { //模板刚创建的时候

        },
        methods: {
            shops_list(flag){              
                this.$http.get(this.APIURL_PREFIX + '/api/wap/collection/page',{params:{page:this.page,rows:this.pageSize,collectionType:2}}).then((response) => {
                     if (flag) {
                        var arr=response.data.data
                        arr.forEach(item => {
                           item.ischecked = false;
                        })
                        this.lis = this.lis.concat(arr);
                        this.couponList = this.lis.couponList
                    } else {
                        var arr=response.data.data
                        arr.forEach(item => {
                           item.ischecked = false;
                        })
                        this.lis = arr
                    }
                    if (0 == response.data.data.length || response.data.data.length < this.pageSize) {
                        this.busy = true;
                        this.loadall = true;
                    }
                    else {
                        this.busy = false;
                        this.page++
                    }

                }).catch(function (err) {
                    console.log(err)
                });
            },
             loadMore() {
                this.busy = true;
                setTimeout(() => {
                    this. shops_list(this.page > 1);
                }, 500);
            },
            checkitem(item) {
                item.ischecked = !item.ischecked;
                if (!item.ischecked && this.allchkstatus) { this.allchkstatus = false }
            },
            allcheck() {
                this.allchkstatus = !this.allchkstatus
                this.lis.forEach(item => {
                    item.ischecked = this.allchkstatus;
                });
            },
            deletesomeitem() {
                this.dels.length = 0;
                 if(confirm("确定删除吗？")){
                       this.lis.forEach(item => {
                        layer.msg("删除成功")
                    item.ischecked && this.dels.push(item.collectionId);
                });


                this.$http.post(this.APIURL_PREFIX + '/api/wap/collection/delete', $.param({ id: this.dels.join(','), type: this.collectTap })).then((response) => {
                    if (0 == response.data.code) {
                        this.lis = this.lis.filter(function (item) { return !item.ischecked });
                    }
                    else {
                        layer.msg(response.data.msg);
                    }
                }).catch(function (err) {
                    console.log(err)
                });
           }

              

            }
        },
        components: {
            navFooter,
            collectTap,
            loadingtmp

        }
    }
</script>

